<template>
  <div
    class="hitokoto cards"
    @click="refresh(event)"
    @contextmenu.prevent.stop="copyToClipboard(hitokotoData.text)"
  >
    <div class="text" title="左击刷新，右击复制">{{ hitokotoData.text }}</div>
    <div class="from">—《{{ hitokotoData.from }}》</div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, h, reactive } from "vue";
import { homepage } from "@/store/index.js";
import { Error } from "@icon-park/vue-next";
import { getHitokoto } from "@/api";
import debounce from "@/utils/debounce";
// 页面初始化渲染
onMounted(() => {
  Hitokoto(); // 获取一言数据
});

const store = homepage();
// 一言数据
let hitokotoData = reactive({
  text: "这里应该显示一句话",
  from: "無名",
});
// 获取一言数据
const Hitokoto = async () => {
  let res = await getHitokoto().catch(() => {
    ElMessage({
      message: "一言获取失败",
      icon: h(Error, {
        theme: "filled",
        fill: "#efefef",
      }),
    });
  });
  hitokotoData.text = res.hitokoto;
  hitokotoData.from = res.from;
};

// copy 一言
const copyToClipboard = (content) => {
  const el = document.createElement("textarea");
  el.value = content;
  document.body.appendChild(el);
  el.select();
  document.execCommand("copy");
  document.body.removeChild(el);
  ElMessage({
    message: "复制成功",
  });
};

// 重新请求一言接口
const refresh = () => {
  hitokotoData.text = "新的一言正在赶来的路上";
  hitokotoData.from = "来源加载中";
  debounce(() => {
    Hitokoto();
  }, 500);
};
</script>

<style lang="scss" scoped>
* {
  color: #fff;
}
.hitokoto {
  // width: 250px;
  width: 100%;
  height: 100%;
  padding: 20px 0px;
  display: block;
  text-align: center;
  // flex-direction: column;
  // // margin: auto;
  // align-items: center;
  // justify-self: center;
  .text {
    align-self: start;
    font-size: 14px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .from {
    font-size: 13px;
  }
}

.cards {
  height: auto;
  background: transparent;
  backdrop-filter: blur(0px);
}

// .cards:hover {
//   transform: scale(1.2);
//   transition: 0.5s;
//   backdrop-filter: blur(20px);
// }
</style>
